<template>
    <transition name = "fade">
        <div v-if = "show">
            <el-button :disabled = "isBtnDisabled" size = "mini" type = "primary"
                       @click = "add">添加属性
            </el-button>
            <!--静态属性表格-->
            <el-table :data = "onlyTableData" border stripe>
                <!--展开行-->
                <el-table-column type = "expand">
                    <template slot-scope = "scope">
                        <el-tag
                            v-for = "(item,i) in scope.row.attr_vals"
                            :key = "i" closable @close = "handleClose(i,scope.row)">
                            {{ item }}
                        </el-tag>
                        <!--输入文本框-->
                        <el-input
                            v-if = "scope.row.inputVisible"
                            ref = "saveTagInput"
                            v-model = "scope.row.inputValue"
                            class = "input-new-tag"
                            size = "small"
                            @blur = "handleInputConfirm(scope.row)"
                            @keyup.enter.native = "handleInputConfirm(scope.row)"
                        >
                        </el-input>
                        <!--添加按钮-->
                        <el-button v-else class = "button-new-tag" size = "small"
                                   @click = "showInput(scope.row)">+ New Tag
                        </el-button>
                    </template>
                </el-table-column>
                <!--索引列-->
                <el-table-column type = "index"></el-table-column>
                <el-table-column label = "属性名称" prop = "attr_name"></el-table-column>
                <el-table-column label = "操 作">
                    <template slot-scope = "scope">
                        <el-button icon = "el-icon-edit" size = "mini" type = "primary"
                                   @click = "showEditDialog(scope.row.attr_id)">修改
                        </el-button>
                        <el-button icon = "el-icon-delete" size = "mini" type = "danger"
                                   @click = "removeParam(scope.row.attr_id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--修改-->
            <Edit ref = "edit" :activeName = "activeName" :cateId = "cateId"
                  :editFormData = "editFormData"
                  @getParamsData = "getParamsData"
            ></Edit>
        </div>
    </transition>
</template>

<script>
import Edit from "@/views/goods/Edit.vue";

export default {
    name: 'VueShopAddAttriBute',
    components: {Edit},
    props: ['isBtnDisabled', 'onlyTableData', 'activeName', 'cateId'],
    data () {
        return {
            editFormData: {},
            show: false,
            // 控制按钮，输入框是否显示
            inputVisible: false,
            // 文本框输入的内容
            inputValue: ''
        };
    },
    methods: {
        showInput (row) {
            row.inputVisible = true;
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        // 点击打开添加对话框
        add () {
            this.$emit('openAdd');
        },
        // 点击打开修改
        async showEditDialog (attr_id) {
            const {data: res} = await this.$http.get(
                `categories/${this.cateId}/attributes/${attr_id}`,
                {
                    params: {attr_sel: this.activeName}
                });
            if (res.meta.status !== 200) {
                return this.$message.error("获取参数失败");
            }
            this.editFormData = res.data;
            this.$refs.edit.editDialogVisible = true;
        },
        // 删除参数
        async removeParam (attr_id) {
            const confirm = await this.$confirm('是否永久删除该参数', "提示", {
                confirmButtonClass: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).catch(err => err);
            if (confirm !== "confirm") {
                return;
            }
            const {data: res} = await this.$http.delete(
                `categories/${this.cateId}/attributes/${attr_id}`);
            if (res.meta.status !== 200) {
                return this.$message.error("删除参数失败");
            }
            this.$message.success("删除参数成功");
            this.getParamsData()
        },
        // 文本框失去焦点或按下enter触发
        handleInputConfirm (row) {
            if (row.inputValue.trim().length === 0) {
                row.inputValue = "";
                row.inputVisible = false;
                return;
            }
            row.attr_vals.push(row.inputValue.trim())
            row.inputValue = "";
            row.inputVisible = false;

            this.saveAttrValue(row);
        },
        /**
         * @name saveAttrValue
         * @param row
         * @returns {Promise<ElNotificationComponent>}
         * @desc 发起网络请求
         */
        async saveAttrValue (row) {
            const {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
                attr_name: row.attr_name,
                attr_sel: row.attr_sel,
                attr_vals: row.attr_vals.join(' '),
            });
            if (res.meta.status !== 200) {
                return this.$notify({
                    title: "失败",
                    message: "修改参数失败",
                    type: "error"
                });
            }
            this.$notify.success({
                title: "成功",
                message: '修改参数项成功',
                type: "success"

            });
        },
        /**
         * @name handleClose
         * @param i
         * @param row
         * @desc 删除参数可选项
         */
        handleClose (i, row) {
            // 删除参数所选项
            row.attr_vals.splice(i, 1);
            //调用 请求函数
            this.saveAttrValue(row);
        },
        // 调用父组件方法更新视图
        getParamsData () {
            this.$emit('getParamsData');
        }
    },
};
</script>

<style lang = "less" scoped>
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}

.input-new-tag {
    width: 120px;
}

.fade-enter, .fade-leave-active {
    opacity: 0
}

.el-tag, .button-new-tag, .el-input {
    margin: 15px;
}
</style>
